<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.font.im/css?family=Covered+By+Your+Grace" rel="stylesheet">
    <link href='http://cdn.repository.webfont.com/webfonts/nomal/144701/46296/609aa1b0f629d8e9049bf3bc.css' rel='stylesheet' type='text/css' />
    <link href='http://cdn.repository.webfont.com/webfonts/nomal/144701/46296/609aa219f629d8e9049bf3bd.css' rel='stylesheet' type='text/css' />
    <link href="https://fonts.font.im/css?family=Orbitron" rel="stylesheet">
    <title>便携式空调</title>
</head>
<style>
    html,body{
        margin: 0;
        padding: 0;
    }
    #app{
        width: 100%;
        height: 100vh;
    }
    #tips{
        width: 100%;
        height: 20vh;
        /* background: cornflowerblue; */
    }
    .tips_tit{
        font-size: 30px;
        text-align: center;
        padding: 40px 0;
        font-family:'HanWangYenThin-280130e0f62353d';
        font-weight: 600;
    }
    .tips_tip{
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-family:'HanWangYenThin-2801327b8b2353d';
    }
    .tips_img{
        width: 20px;
        height: 20px;
        position: relative;
        top: 3px;   
    }
    #aircon{
        width: 100%;
        height: 35vh;
        /* background: tomato; */
        padding-top: 10px
    }
    .aircon_host{
        width: 93%;
        height: 160px;
        border-radius: 10px 10px 20px 20px;
        margin: 0 auto;
        border: 1px solid rgb(151, 151, 151);
        box-shadow: -2px 2px 5px #cecece,
				2px -2px 5px #cecece;
    }
    .host_up{
        width: 100%;
        height: 130px;
        border-radius: 10px 10px 0 0;
    }
    .logo{
        width: 50px;
        height: 77px;
        position: relative;
        top: 10px;
        left: 10px;
    }
    .logo img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .temp{
        width: 70px;
        height: 70px;
        line-height: 40px;
        /* background-color: black; */
        position: relative;
        left: 270px;
        top: -50px;
        color: rgb(160, 160, 160);
    }
    .temp_up{
        font-size: 12px;
        color: rgb(160, 160, 160);
    }
    .temp_up img{
        width: 20px;
        height: 20px;
        position: relative;
        top: 3px;
    }
    .temp_down{
        font-family: 'Orbitron', sans-serif;
        font-size: 26px;
    }
    .host_down{
        width: 100%;
        height: 30px;
        border-top: 1px solid rgb(151, 151, 151);
    }
    .host_down_air{
        width: 80%;
        position: relative;
        top: 10px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .host_down_left,.host_down_mid,.host_down_right{
        /* display: none; */
        width: 5px;
        height: 60px;
        background-color: rgb(175, 175, 175);
    }
    .host_down_left{
        transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
    }
    .host_down_right{
        transform:rotate(150deg);
	-ms-transform:rotate(150deg); /* IE 9 */
	-webkit-transform:rotate(150deg); /* Safari and Chrome */
    }
    #remote{
        width: 100%;
        height: 40vh;
        /* background: violet; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .remote_tit{
        width: 30%;
        height: 40px;
        margin: 0 auto;
        line-height: 40px;
        text-align: center;
        border: 2px solid slategrey;
        border-radius: 5px;
    }
    .remote_domain{
        width: 70%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .cooling,.close,.heat{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        box-shadow: -2px 2px 5px #bdbdbd,
        2px 2px 5px #bbbbbb;
				
    }
    .cooling img,.close img,.heat img{
        width: 30px;
        height: 30px;
        display: block;
        margin: 0 auto;
        position: relative;
        top: 27%;
    }
    .cooling{
        background: rgb(65, 79, 176);
    }
    .close{
        background: rgb(231, 4, 86);
    }
    .heat{
        background: rgb(250, 165, 20);
    }
    .up_down{
        width: 60px;
        height: 140px;
        margin: 0 auto;
        /* background-color: brown; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .up,.down{
        width: 60px;
        height: 60px;
        background: rgb(218, 213, 219);
        border-radius: 50%;
        box-shadow: -2px 2px 5px #bdbdbd,
        2px 2px 5px #bbbbbb;
    }
    .up img,.down img{
        width: 15px;
        height: 10px;
        display: block;
        margin: 0 auto;
        position: relative;
        top:45%;  
    }
    .light{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: relative;
        top: 1px;
        left: 330px;
    }
</style>
<body>
    <div id="app">
        <!-- 提示部分 -->
        <div id="tips">
            <div class="tips_tit">便携式小空调</div>
            <div class="tips_tip">
                <img class="tips_img" src="http://lacblog.top/upload/2021/10/%E7%81%AF%E6%B3%A1-5fa66d4d201d47a5bdd1d1d84b0e539e.png" alt="">
                <span>Tip:为你的夏日带去清凉!</span>
            </div>
        </div>
        <!-- 空调部分 -->
        <div id="aircon">
            <div class="aircon_host">
                <div class="host_up">
                    <div class="logo">
                        <img src="http://lacblog.top/upload/2021/10/biaoshi-75ceadf83192422dba145750a42cf697.png" alt="">
                    </div>
                    <div class="temp">
                        <div class="temp_up">
                            <img id="temp_up_pic" v-if="cool_sta" src="http://lacblog.top/upload/2021/10/%E9%9B%AA%E8%8A%B1-337203517f554f14aa73b284fe2bfed7.png" alt="">
                            <img v-if="heat_sta" src="http://lacblog.top/upload/2021/10/%E5%A4%AA%E9%98%B3-d1c004679a3a4f2ea539fb11e5a369cd.png" >
                            <span>{{air}}</span>
                        </div>
                        <div class="temp_down">
                            {{dc}}°C
                        </div>
                    </div>
                </div>
                <div class="host_down">
                    <div class="light" v-if="close_gre" style="background: greenyellow;"></div>
                    <div class="light" v-if="close_red" style="background: red"></div>
                </div>
                <div class="host_down_air">
                    <div v-if="air_sta" class="host_down_left"></div>
                    <div v-if="air_sta" class="host_down_mid"></div>
                    <div v-if="air_sta" class="host_down_right"></div>
                </div>
                
            </div>
        </div>

        <!-- 控制器部分 -->
        <div id="remote">
            <div class="remote_tit">遥控器</div>
            <div class="remote_domain">
               <div class="cooling" @click="cooling"><img src="http://lacblog.top/upload/2021/10/%E9%9B%AA%E8%8A%B1-337203517f554f14aa73b284fe2bfed7.png" alt=""></div>
               <div class="close" @click="close"><img src="http://lacblog.top/upload/2021/10/%E5%85%B3%E9%97%AD-311ee61cf93747d28e558aa23a71fbb9.png" alt=""></div>
               <div class="heat" @click="heat"><img src="http://lacblog.top/upload/2021/10/%E5%A4%AA%E9%98%B3-d1c004679a3a4f2ea539fb11e5a369cd.png" alt=""></div>
            </div>
            <div class="up_down">
                <div @click="up" class="up"><img src="http://lacblog.top/upload/2021/10/%E5%90%91%E4%B8%8A-e748d5117496483c806ffe464200251a.png" alt=""></div>
                <div @click="down" class="down"><img src="http://lacblog.top/upload/2021/10/%E5%90%91%E4%B8%8B-01f6a6fb53eb4245967d9030d40633d3.png" alt=""></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new new Vue({
            el:'#app',
            data() {
                return {
                    dc:26,
                    cool_sta:true,
                    heat_sta:false,
                    sta:1,
                    close_gre:false,
                    close_red:true,
                    air_sta:false,
                    air:'制冷'
                }
            },
            methods: {
                cooling:function(){
                    this.air = '制冷';
                    this.cool_sta = true
                    this.heat_sta = false
                },
                close:function(){
                    this.close_red = !this.close_red
                    this.close_gre = !this.close_gre
                    this.air_sta = !this.air_sta
                },
                heat:function(){
                    this.air = '制热'
                    this.heat_sta = true
                    this.cool_sta = false
                },
                up:function(){
                    if(this.dc >=35){
                        alert("已经是最高温度啦!");
                    }else{
                        this.dc++;
                    }
                },
                down:function(){
                    if(this.dc <=10){
                        alert("已经是最低温度啦!");
                    }else{
                        this.dc--;
                    }
                }
            },
        })
    </script>
</body>
</html>